<template>
  <div class="flex-col justify-between" style="height: 100%">
    <n-form style="margin-top: 24px" ref="formRef" :model="form" :rules="rules" label-placement="top"
            label-width="120" require-mark-placement="right-hanging">
      <n-form-item label="应用Logo" path="appLogo">
        <jb-avatar v-model:src="form.appLogo"
                   accept="image/jpg,image/png,image/gif,image/bmp,image/jpeg"
                   save-path="logo/{date(yyMMdd)}/{random(6)}/{ori}" :upload="true">

        </jb-avatar>
      </n-form-item>
      <n-form-item label="聊天时,是否展示头像">
        <n-switch v-model:value="form.showAvatar" :round="false">
          <template #checked>
            yes
          </template>
          <template #unchecked>
            no
          </template>
        </n-switch>

      </n-form-item>

      <div v-if="form.showAvatar">
        <n-form-item label="用户头像" path="userAvatar">
          <jb-avatar v-model:src="form.userAvatar" accept="image/jpg,image/png,image/gif,image/bmp,image/jpeg"
                     save-path="logo/{date(yyMMdd)}/{random(6)}/{ori}" :upload="true">
          </jb-avatar>

        </n-form-item>
        <n-form-item label="AI头像" path="assistantAvatar">
          <jb-avatar v-model:src="form.assistantAvatar"
                     accept="image/jpg,image/png,image/gif,image/bmp,image/jpeg"
                     save-path="logo/{date(yyMMdd)}/{random(6)}/{ori}" :upload="true">

          </jb-avatar>
        </n-form-item>
      </div>

    </n-form>
    <div class="flex justify-center">
      <jb-btn type="primary" @click="handleSubmit">提交-更新UI布局样式配置</jb-btn>
    </div>
  </div>
</template>

<script setup>
import {
  onMounted,
  ref
} from "vue";
import {
  JBoltApi
} from "@/service/request/index.js";
import {
  showSuccessMsg
} from '@/utils/service/msg.js'

// 定义触发的事件
const emit = defineEmits(['update-success']);

const props = defineProps({
  appId: String
})


const formRef = ref(null)

const rules = {
  userAvatar: {
    required: true,
    message: '请上传用户头像',
    trigger: 'change'
  },
  assistantAvatar: {
    required: true,
    message: '请上传AI头像',
    trigger: 'change'
  },
  appLogo: {
    required: true,
    message: '请上传应用Logo',
    trigger: 'change'
  }

}

const form = ref({
  userAvatar: '',
  assistantAvatar: '',
  appLogo: '',
  showAvatar:false
})

async function handleSubmit(fun) {
  await formRef.value?.validate()
  console.log('提交表单', JSON.stringify(form.value))
  let url = '/aiAppConfig/updateConfig';
  await JBoltApi.post(url, {
    linkType: 'app',
    linkId: props.appId,
    configType: 'uiConfig',
    configValue: JSON.stringify(form.value)
  }).then(res => {
    showSuccessMsg('保存成功,请刷新页面更新右侧聊天界面新头像');
    // 使用正确的方式触发自定义事件，通知父组件保存成功
    // emit('update-success');
  });
}

// let isEdit = ref(false)

function loadConfigData() {
  JBoltApi.get(`/aiAppConfig/getConfigByCondition`, {
    linkType: "app",
    linkId: props.appId,
    configType: 'uiConfig'
  }).then(res => {
    // console.log("返回的值", JSON.stringify(res.result.data));

    if (res.result.data !== null) {
      form.value = res.result.data;
    }
  })
}

onMounted(() => {
  if (props.appId) {
    loadConfigData()
  }
})
</script>


<style scoped>

</style>